/***
 * 
 */
define( [ 'Vue', 'axios' ], function (Vue,  axios) {
    return Vue.component('provider-list', {
        data : function() {
            return { providers : [] };
        },

        mounted : function () {
            var _this = this;

            axios.get('application.json') .then(function (response) {
                _this.providers = response.data;
            });

            window.addEventListener("hashchange", function(){
                _this.providers = _this.providers.sort(function(a, b) {
                    return a[_this.$route.query.sort] > b[_this.$route.query.sort] ? -1 : 1;
                });
            });
        },

        template : `
            <div>
                <div>
                    <a>Sort</a>
                    <a href="#/?sort=host">host</a>
                    <a href="#/?sort=port">port</a>
                    <a href="#/?sort=applicationName">applicationName</a>
                    <a href="#/?sort=processName">processName</a>
                    <a href="#/?sort=startTime">startTime</a>
                    <a href="#/?sort=druidActiveCount">druidActiveCount</a>
                    <a href="#/?sort=druidMaxActive">druidMaxActive</a>
                    <a href="#/?sort=sourceCodeVersion">sourceVersion</a>
                </div>
                <br/>
                <div v-for="(item, index) in providers">
                    <provider :provider=item :index=index></provider>
                    <br />
                </div>
            </div>
            `
    });
});